<template>
  <div>
    <div class="head-bg">
      <el-image :src="headBg" fit="cover"></el-image>
    </div>
    <div class="content-container">
      <div class="content">
        <!-- <div class="search-container">
          <div class="search-box">
            <el-input
              placeholder="请输入内容"
              v-model="queryParams.searchInput"
            >
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
              <span class="search-btn" slot="append">
                搜索
              </span>
            </el-input>
          </div>
        </div> -->
        <div class="screen-container mt-28">
          <RouterSelectStrip
            :active-id.sync="queryParams.yearId"
            :screenList="yearList"
            label="年份"
            @itemClick="yearItemClick"
          />
          <DashLine />
          <RouterSelectStrip
            :active-id.sync="queryParams.levelId"
            :screenList="rangeTypeList"
            label="级别"
            @itemClick="rangeTypeItemClick"
          />
          <DashLine />
          <RouterSelectStrip
            :active-id.sync="queryParams.provinceId"
            :screenList="addressList"
            label="省份"
            @itemClick="addressItemClick"
          />
        </div>

        <div class="module-container">
          <div class="left">
            <div id="map" class="map"></div>
          </div>
          <div class="right">
            <div class="search">
              <div>
                <span style="padding-right: 1rem"> 地级市: </span>
                <el-select
                  v-model="searchForm.address"
                  placeholder="请选择活动区域"
                  filterable
                  style="width: 160px"
                >
                  <el-option
                    v-for="item in addressList"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  ></el-option>
                </el-select>
              </div>

              <div>
                <span style="padding-right: 1rem"> 年份: </span>

                <el-date-picker v-model="yearRangeStart" type="year">
                </el-date-picker>
                <!-- 至
                <el-date-picker v-model="yearRangeEnd" type="year">
                </el-date-picker> -->
              </div>

              <el-button type="primary"> 查询 </el-button>
            </div>
            <div id="info" class="info"></div>
          </div>
        </div>

        <div class="table-container">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column type="index" label="序号" width="80">
            </el-table-column>
            <el-table-column prop="title" label="名称" width="180">
            </el-table-column>
            <el-table-column prop="unit" label="运营单位"> </el-table-column>
            <el-table-column prop="provinceName" label="省份" width="100">
            </el-table-column>
            <el-table-column prop="cityName" label="区县" width="100">
            </el-table-column>
            <el-table-column
              v-for="item in rangeTypeList"
              :key="item.dictValue"
              :label="item.dictLabel"
              width="80"
            >
              <template slot-scope="scope">
                {{ booleanText(scope.row.dictLabel, item.dictLabel) }}
              </template>
            </el-table-column>

            <!-- <el-table-column label="省级" width="80">
              <template slot-scope="scope">
                {{ booleanText(scope.row.dictLabel) }}
              </template>
            </el-table-column>

            <el-table-column label="市级" width="80">
              <template slot-scope="scope">
                {{ booleanText(scope.row.dictLabel) }}
              </template>
            </el-table-column> -->
          </el-table>
        </div>

        <pagination
          :total="tableTotal"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<script>
import chinaJson from '@/assets/js/echartsChina.js'
import { getProvinceList } from '@/api/getProvince'
import RouterSelectStrip from '@/components/HeadScreenStrip/RouterSelectStrip.vue'

import { getPlatformList } from '@/api/innovatePlatform.js'
export default {
  name: 'innovatePlatform',
  components: {
    RouterSelectStrip,
  },
  computed: {
    booleanText() {
      return (infoLabel, typeLabel) => {
        return infoLabel === typeLabel ? '是' : '否'
      }
    },
    yearValueList() {
      let yearVList = []
      yearVList = this.yearList.map((item) => {
        return item.dictLabel
      })
      return yearVList
    },
    yearDataInfo() {
      return [255, 223, 212, 292]
    },
  },
  data() {
    return {
      headBg: require('@/assets/page-head/innvoate-plat.png'),
      searchForm: {
        address: '',
      },
      yearDictName: 'innovatePlatform_yearType',
      yearList: [
        { dictLabel: '2021', dictValue: '0' },
        { dictLabel: '2020', dictValue: '1' },
        { dictLabel: '2019', dictValue: '2' },
        { dictLabel: '2018', dictValue: '3' },
      ],
      yearDataList: [],
      provinceData: [
        {
          name: '上海',
          value: 205,
        },
        {
          name: '北京',
          value: 212,
        },
        {
          name: '天津',
          value: 234,
        },
        {
          name: '重庆',
          value: 221,
        },
        {
          name: '河北',
          value: 135,
        },
        {
          name: '山东',
          value: 125,
        },
        {
          name: '陕西',
          value: 124,
        },
        {
          name: '山西',
          value: 432,
        },
        {
          name: '辽宁',
          value: 321,
        },
        {
          name: '吉林',
          value: 332,
        },
        {
          name: '黑龙江',
          value: 232,
        },
        {
          name: '宁夏',
          value: 192,
        },
        {
          name: '江苏',
          value: 183,
        },
        {
          name: '河南',
          value: 163,
        },
        {
          name: '安徽',
          value: 293,
        },
        {
          name: '浙江',
          value: 203,
        },
        {
          name: '湖南',
          value: 254,
        },
        {
          name: '湖北',
          value: 185,
        },
        {
          name: '甘肃',
          value: 105,
        },
        {
          name: '青海',
          value: 95,
        },
        {
          name: '西藏',
          value: 84,
        },
        {
          name: '新疆',
          value: 23,
        },
        {
          name: '内蒙古',
          value: 25,
        },
        {
          name: '贵州',
          value: 35,
        },
        {
          name: '四川',
          value: 28,
        },
        {
          name: '江西',
          value: 435,
          selected: true,
        },
        {
          name: '福建',
          value: 187,
        },
        {
          name: '广东',
          value: 16,
        },
        {
          name: '广西',
          value: 19,
        },
        {
          name: '云南',
          value: 25,
        },
        {
          name: '海南',
          value: 21,
        },
        {
          name: '香港',
          value: 9,
        },
        {
          name: '澳门',
          value: 15,
        },
        {
          name: '台湾',
          value: 12,
        },
      ],

      rangeDictName: 'innovatePlatform_level',
      rangeTypeList: [
        { dictLabel: '国家级', dictValue: '0' },
        { dictLabel: '纯省级', dictValue: '1' },
        { dictLabel: '省级', dictValue: '2' },
        { dictLabel: '纯市级', dictValue: '3' },
        { dictLabel: '纯市级', dictValue: '4' },
      ],
      addressList: [],
      yearRangeStart: new Date(2016, 0, 0, 0, 0),
      yearRangeEnd: new Date(),

      tableTotal: 0,
      tableData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        provinceId: undefined,
        levelId: undefined,
        yearId: undefined,
      },
    }
  },
  created() {
    this.initProvinceList()
    this.initYearType()
    this.initRangeType()
    this.getList()
  },
  mounted() {
    this.initEchartsMap()
    this.initLineChart()
  },
  methods: {
    getList() {
      getPlatformList(this.queryParams).then((res) => {
        if (res.code === 200) {
          this.tableData = res.rows
          this.tableTotal = Number(res.total)
        }
      })
    },
    initYearType() {
      this.getDictList(this.yearDictName).then((res) => {
        if (res.code == 200) {
          this.yearList = res.data
        }
      })
    },
    initRangeType() {
      this.getDictList(this.rangeDictName).then((res) => {
        if (res.code == 200) {
          this.rangeTypeList = res.data
        }
      })
    },
    initProvinceList() {
      getProvinceList().then((res) => {
        if (res.code == 200) {
          let addressTypeList = res.data.map((item) => {
            let tempObj = item
            tempObj.dictValue = item.id
            tempObj.dictLabel = item.name
            return tempObj
          })
          this.addressList = addressTypeList
        }
      })
    },

    yearItemClick() {
      // this.queryParams.yearId = activeItem.id
      this.getList(1)
    },
    addressItemClick() {
      // this.queryParams.addressActiveId = activeItem.id
      this.getList(1)
    },
    rangeTypeItemClick(ee) {
      // this.queryParams.dictLabel = ee.dictLabel
      // this.queryParams.address = activeItem.id
      this.getList(1)
    },
    // 初始化 数据表
    initLineChart() {
      var chartDom = document.getElementById('info')
      var myChart = this.$echarts.init(chartDom)
      var option

      option = {
        xAxis: {
          type: 'category',
          data: this.yearValueList,
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: this.yearDataInfo,
            type: 'line',
            emphasis: {
              focus: 'series',
            },
          },
        ],
      }

      option && myChart.setOption(option)
    },
    // 初始化地图
    initEchartsMap() {
      this.$echarts.registerMap('china', chinaJson)
      var chart = this.$echarts.init(document.getElementById('map'))

      chart.setOption({
        title: {
          // text: '中国轮廓地图',
          top: '4%',
          left: 'center',
          textStyle: {
            fontSize: 20,
            fontWeight: 600,
            color: '#fff',
          },
        },
        tooltip: {
          // 触发类型, 数据项图形触发
          trigger: 'item',
          backgroundColor: '#fff',
          textStyle: {
            color: '#000',
          },
          formatter: function(val) {
            return (
              val.data.name +
              '<div class="bjMap">' +
              '<p>' +
              val.data.value +
              '</p>' +
              '</div>'
            )
          },
        },
        series: [
          {
            type: 'map',
            map: 'china',
            roam: false, //是否开启鼠标缩放和平移漫游
            geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
            label: {
              normal: {
                show: true, //显示省份标签
                textStyle: {
                  color: '#000',
                  fontWeight: 'bold',
                  fontSize: '12px',
                }, //省份标签字体颜色
              },
              emphasis: {
                //对应的鼠标悬浮效果
                show: true,
                textStyle: { color: '#fff' },
              },
            },
            itemStyle: {
              normal: {
                borderWidth: 1, //区域边框宽度
                borderColor: '#fff', //区域边框颜色
                areaColor: 'rgb(169, 151, 131)', //区域颜色
              },

              emphasis: {
                borderWidth: 1, //鼠标滑过区域，区域边框宽度
                borderColor: '#fff', //鼠标滑过区域，区域边框颜色
                areaColor: 'rgb(93, 47,145)', //鼠标滑过区域背景色
              },
            },
            data: this.provinceData,
            // data: [
            //   {
            //     name: '上海',
            //     value: '好邻居！可玩的地儿多的数不过来！',
            //   },
            //   {
            //     name: '北京',
            //     value: '中国帝都',
            //   },
            //   {
            //     name: '天津',
            //     value: '好邻居！可玩的地儿多的数不过来！',
            //   },
            //   {
            //     name: '重庆',
            //     value: '好邻居！可玩的地儿多的数不过来！',
            //   },
            //   {
            //     name: '河北',
            //     value: '好邻居！可玩的地儿多的数不过来！',
            //   },
            //   {
            //     name: '山东',
            //     value: '好邻居！可玩的地儿多的数不过来！',
            //   },
            //   {
            //     name: '陕西',
            //     value: '好邻居！可玩的地儿多的数不过来！',
            //   },
            //   {
            //     name: '山西',
            //     value: '好邻居！可玩的地儿多的数不过来！',
            //   },
            //   {
            //     name: '辽宁',
            //     value: '好邻居！可玩的地儿多的数不过来！',
            //   },
            //   {
            //     name: '吉林',
            //     value: '好邻居！可玩的地儿多的数不过来！',
            //   },
            //   {
            //     name: '黑龙江',
            //     value: '好邻居！可玩的地儿多的数不过来！',
            //   },
            //   {
            //     name: '宁夏',
            //     value: '好邻居！可玩的地儿多的数不过来！',
            //   },
            //   {
            //     name: '江苏',
            //     value: '好邻居！可玩的地儿多的数不过来！',
            //   },
            //   {
            //     name: '河南',
            //     value: '好邻居！可玩的地儿多的数不过来！',
            //   },
            //   {
            //     name: '安徽',
            //     value: '好邻居！可玩的地儿多的数不过来！',
            //   },
            //   {
            //     name: '浙江',
            //     value: '好邻居！可玩的地儿多的数不过来！',
            //   },
            //   {
            //     name: '湖南',
            //     value: '好邻居！可玩的地儿多的数不过来！',
            //   },
            //   {
            //     name: '湖北',
            //     value: '好邻居！可玩的地儿多的数不过来！',
            //   },
            //   {
            //     name: '甘肃',
            //     value: '好邻居！可玩的地儿多的数不过来！',
            //   },
            //   {
            //     name: '青海',
            //     value: '好邻居！可玩的地儿多的数不过来！',
            //   },
            //   {
            //     name: '西藏',
            //     value: '好邻居！可玩的地儿多的数不过来！',
            //   },
            //   {
            //     name: '新疆',
            //     value: '好邻居！可玩的地儿多的数不过来！',
            //   },
            //   {
            //     name: '内蒙古',
            //     value: '好邻居！可玩的地儿多的数不过来！',
            //   },
            //   {
            //     name: '贵州',
            //     value: '好邻居！可玩的地儿多的数不过来！',
            //   },
            //   {
            //     name: '四川',
            //     value: '好邻居！可玩的地儿多的数不过来！',
            //   },
            //   {
            //     name: '江西',
            //     value: '好邻居！可玩的地儿多的数不过来！',
            //     selected: true,
            //   },
            //   {
            //     name: '福建',
            //     value: '好邻居！可玩的地儿多的数不过来！',
            //   },
            //   {
            //     name: '广东',
            //     value: '好邻居！可玩的地儿多的数不过来！',
            //   },
            //   {
            //     name: '广西',
            //     value: '好邻居！可玩的地儿多的数不过来！',
            //   },
            //   {
            //     name: '云南',
            //     value: '好邻居！可玩的地儿多的数不过来！',
            //   },
            //   {
            //     name: '海南',
            //     value: '好邻居！可玩的地儿多的数不过来！',
            //   },
            //   {
            //     name: '香港',
            //     value: '好邻居！可玩的地儿多的数不过来！',
            //   },
            //   {
            //     name: '澳门',
            //     value: '好邻居！可玩的地儿多的数不过来！',
            //   },
            //   {
            //     name: '台湾',
            //     value: '好邻居！可玩的地儿多的数不过来！',
            //   },
            // ],

            /*    data:[
		                	{
				        	      name: '西城',
				        	      value: 100
				        	    }, {
				        	      name: '东城',
				        	      value: 0
				        	    }, {
				        	      name: '海淀',
				        	      value: 60
				        	    }, {
				        	      name: '朝阳',
				        	      value: 0
				        	    }, {
				        	      name: '大兴',
				        	      value: 60
				        	    }, {
				        	      name: '通州',
				        	      value: 60
				        	    }, {
				        	      name: '丰台',
				        	      value: 0
				        	    }
		                ] */
          },
        ],
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.content-container {
  & > .content {
    width: 1200px;
    margin: auto;
    overflow: hidden;

    .screen-container {
      // margin-top: 25px;
      background-color: #f6f9ff;
    }
    .search-container {
      display: flex;
      align-items: center;
      padding: 1rem;
      margin-top: 25px;
      background-color: #f6f9ff;

      .search-box {
        width: 560px;
        ::v-deep .el-input-group__append {
          background-color: #409eff;
          cursor: pointer;
        }
        .search-btn {
          background-color: #409eff;
          color: #fff;
        }
      }
    }

    .module-container {
      display: flex;
      height: 100%;
      align-items: stretch;
      .left {
        .map {
          width: 552px;
          height: 639px;
        }
      }
      .right {
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-around;
        width: 657px;
        height: 639px;
        padding: 30px 0;
        .search {
          display: flex;
          justify-content: space-around;
          align-items: center;
          height: 4rem;
          width: 657px;
          // background-color: #f00;
          padding: 20px 0;

          .el-date-editor.el-input,
          .el-date-editor.el-input__inner {
            width: 100px;
          }
        }
        .info {
          width: 657px;
          height: 550px;
        }
      }
    }

    .table-container {
      padding: 20px 0;

      ::v-deep .el-table th {
      }
      ::v-deep .el-table th.el-table__cell {
        border: dashed 0 #d4d4d4;
        border-width: 0 1px 1px !important;
      }
      ::v-deep .el-table td.el-table__cell {
        border: dashed 1px #d4d4d4 !important;
      }
    }
  }
}
</style>
